<template>
	<view :class="longPress == '1' ? 'record-layer' : 'record-layer1'">
		<view :class="longPress == '1' ? 'record-box' : 'record-box1'">
			<view class="record-btn-layer">
				<button class="record-btn" :class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'"
					:style="VoiceTitle != '松开手指,取消发送' && longPress != '1'?'background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);':'background-color: rgba(0, 0, 0, .5);color:white'"
					longpress="longpressBtn" @touchend="touchendBtn()" @touchmove="handleTouchMove"
					@touchstart="longpressBtn">
					<image :src="IMAGES_URL + 'voice.png'" />
					<text>{{VoiceText}}</text>
				</button>
			</view>
			<!-- 语音音阶动画 -->
			<view :class="VoiceTitle != '松开手指,取消发送'?'prompt-layer prompt-layer-1':'prompt-layer1 prompt-layer-1'"
				v-if="longPress == '2'">
				<view class="prompt-loader">
					<view class="em" v-for="(item,index) in 15" :key="index"></view>
				</view>
				<text class="span">{{VoiceTitle}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/configs/index.js'

	const recorderManager = uni.getRecorderManager()

	export default {
		data() {
			return {
				longPress: '1', // 1显示 按住 说话 2显示 说话中
				delShow: false, // 删除提示框显示隐藏
				time: 0, //录音时长
				duration: 60000, //录音最大值ms 60000/1分钟
				tempFilePath: '', //音频路径
				startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				VoiceTitle: '松手结束录音',
				VoiceText: '按住 说话',
				types: '',
				IMAGES_URL: config.IMAGES_URL,
				//计时器
				timer: '',
				//计时器秒数
				second: 0,
			}
		},
		props: ['type'],

		created: function() {
			this.types = this.type;
		},

		methods: {
			// 计时器方法
			getTimeIntervalplus() {
				//初始化秒数
				this.second = 0
				//首先清除所有计时器
				clearInterval(this.timer);
				//设定一个计时器,将计时器的编号赋值给this.timer
				this.timer = setInterval(() => {
					//延迟的时间设为一秒,所以每过一秒,this.second加一
					this.second += 1;
					//判断当秒数大于等于输入框设定的秒数的时候
					if (this.second >= this.duration) {
						//停止录音
						recorderManager.stop();
						//清除计时器
						clearInterval(this.timer);
						console.log('录音结束')
					}
				}, 1000);
			},

			// 长按录音事件
			longpressBtn(e) {
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				this.longPress = '2';
				// this.VoiceText = '说话中...';
				this.VoiceText = '请录入 地址与故障详情';

				recorderManager.onStop((res) => {
					this.tempFilePath = res.tempFilePath;
				})
				const options = {
					duration: this.duration, // 指定录音的时长，单位 ms
					sampleRate: 48000, // 采样率
					numberOfChannels: 2, // 录音通道数
					encodeBitRate: 320000, // 编码码率
					format: 'mp3', // 音频格式，有效值 aac/mp3
					frameSize: 10, // 指定帧大小，单位 KB
				}
				recorderManager.start(options);

				//封装的一个计时器,调用开始计时
				this.getTimeIntervalplus();

				// 监听音频开始事件
				this.sendLock = false; //长按时是不上锁的。
				recorderManager.onStart((res) => {})
			},

			// 长按松开录音事件
			touchendBtn() {
				this.longPress = '1';
				this.VoiceText = '按住 说话';
				this.VoiceTitle = '松手结束录音'

				recorderManager.onStop((res) => {
					if (this.sendLock) {
						//上锁不发送
					} else { //解锁发送，发送网络请求
						if (res.duration < 1000)
							wx.showToast({
								title: "录音时间太短",
								icon: "none",
								duration: 1000
							});
						else {
							console.log(res);
							this.tempFilePath = res.tempFilePath

							/* uni.getFileInfo({
								filePath: res.tempFilePath,
								success: function(info) {
									console.log("info", info);
									if (info.size < 10 * 1024 * 1024) {
										// 保存文件
										uni.saveFile({
											tempFilePath: res.tempFilePath,
											success: function(res) {
												console.log(res);
											}
										});
									} else {
										console.error("File too large to save.");
									}
								},
								fail: function(err) {
									console.error("File not found: ", err);
								}
							}); */

							setTimeout(() => {
								this.$emit("submit", {
									voicePath: this.tempFilePath,
									second: parseInt(this.second)
								})
							}, 1000)

						}
					}
				})

				// this.recordingTimer(this.time)
				recorderManager.stop(); //结束录音

				clearInterval(this.timer); //清除计时器
			},

			// 删除录音
			handleTouchMove(e) {
				//touchmove时触发
				var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
				if (Math.abs(moveLenght) > 70) {
					this.VoiceTitle = "松开手指,取消发送";
					this.VoiceText = '松开手指,取消发送';
					this.delBtn()
					this.sendLock = true; //触发了上滑取消发送，上锁
				} else {
					this.VoiceTitle = "松手结束录音";
					this.VoiceText = '松手结束录音';
					this.sendLock = false; //上划距离不足，依然可以发送，不上锁
				}
			},

			delBtn() {
				this.delShow = false;
				this.time = 0
				this.tempFilePath = '';
				// this.VoiceTitle = '松手结束录音'
			},
		}
	}
</script>

<style lang="less">
	/* 语音录制开始--------------------------------------------------------------------- */
	.record-layer {
		width: 100%;
		box-sizing: border-box;
		height: 60rpx;
		z-index: 10;
	}

	.record-layer1 {
		width: 100vw;
		box-sizing: border-box;
		height: 100vh;
		position: fixed;
		background-color: rgba(0, 0, 0, .6);
		z-index: 10;
		bottom: 0;
		left: 0;
	}

	.record-box {
		width: 100%;
		position: relative;
	}

	.record-box1 {
		width: 100%;
		position: relative;
		bottom: -83vh;
		height: 17vh;
	}

	.record-btn-layer {
		width: 100%;
	}

	.record-btn-layer button::after {
		border: none;
		transition: all 0.1s;
	}

	.record-btn-layer button {
		font-size: 28rpx;
		width: 100%;
		line-height: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		text-align: center;
		background: #FFD300;
		transition: all 0.1s;
	}

	.record-btn-layer button image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
		margin-bottom: 6rpx;
		vertical-align: middle;
		transition: all 0.3s;
	}

	.record-btn-layer .record-btn-1 {
		background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
		color: #000000 !important;

	}

	.record-btn-layer .record-btn-2 {
		border-radius: 168rpx 168rpx 0 0;
		height: 17vh;
		line-height: 17vh;
		transition: all 0.3s;
	}

	/* 提示小弹窗 */
	.prompt-layer {
		border-radius: 30rpx;
		background: #95EB6C;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	.prompt-layer::after {
		content: '';
		display: block;
		border: 24rpx solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #95EB6C;
		position: absolute;
		bottom: -46rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	//取消动画
	.prompt-layer1 {
		border-radius: 30rpx;
		background: #FB5353;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	.prompt-layer1::after {
		content: '';
		display: block;
		border: 24rpx solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #FB5353;
		position: absolute;
		bottom: -46rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	.prompt-layer-1 {
		font-size: 24rpx;
		width: 300rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -400rpx;
	}

	.prompt-layer-1 .p {
		color: #000000;
	}

	.prompt-layer-1 .span {
		color: rgba(0, 0, 0, .6);
	}

	.prompt-loader .em {}

	/* 语音音阶------------- */
	.prompt-loader {
		width: 192rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	.prompt-loader .em {
		display: block;
		background: #333333;
		width: 2rpx;
		height: 10%;
		margin-right: 5rpx;
		float: left;
	}

	.prompt-loader .em:last-child {
		margin-right: 0rpx;
	}

	.prompt-loader .em:nth-child(1) {
		animation: load 2.5s 1.4s infinite linear;
	}

	.prompt-loader .em:nth-child(2) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(3) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(4) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(5) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(6) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(7) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(8) {
		animation: load 2.5s 0s infinite linear;
	}

	.prompt-loader .em:nth-child(9) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(10) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(11) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(12) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(13) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(14) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(15) {
		animation: load 2.5s 1.4s infinite linear;
	}

	@keyframes load {
		0% {
			height: 10%;
		}

		50% {
			height: 100%;
		}

		100% {
			height: 10%;
		}
	}

	/* 语音音阶-------------------- */
	.prompt-layer-2 {
		top: -80rpx;
	}

	.prompt-layer-2 .text {
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
	}

	/* 语音录制结束---------------------------------------------------------------- */
</style>